<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>青竹 - 文章管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2DD4BF', // 青绿色主色调
            secondary: '#14B8A6', // 深一点的青绿色
            accent: '#0D9488',    // 更深的青绿色
            light: '#ECFEFF',     // 浅青绿色
            dark: '#0F172A',      // 深色文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-item-active {
        @apply bg-primary/10 text-accent border-l-4 border-primary;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-secondary transition-colors duration-300;
      }
      .btn-outline {
        @apply border border-primary text-primary px-4 py-2 rounded-md hover:bg-primary/10 transition-colors duration-300;
      }
    }
  </style>
</head>
<body class="bg-gray-50 text-dark">
  <div class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white shadow-md hidden md:block transition-all duration-300 ease-in-out z-20">
      <div class="p-4 border-b flex items-center space-x-3">
        <div class="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
          <i class="fa fa-leaf text-white"></i>
        </div>
        <h1 class="text-xl font-bold text-dark">青竹</h1>
      </div>
      
      <nav class="p-4">
        <p class="text-xs uppercase text-gray-500 font-semibold mb-3">主菜单</p>
        <ul space-y-1>
          <li>
            <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100">
              <i class="fa fa-dashboard w-5 text-center"></i>
              <span>仪表盘</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-md sidebar-item-active">
              <i class="fa fa-file-text w-5 text-center"></i>
              <span>文章管理</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100">
              <i class="fa fa-folder w-5 text-center"></i>
              <span>分类管理</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100">
              <i class="fa fa-comment w-5 text-center"></i>
              <span>评论管理</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100">
              <i class="fa fa-bar-chart w-5 text-center"></i>
              <span>数据分析</span>
            </a>
          </li>
        </ul>
        
        <p class="text-xs uppercase text-gray-500 font-semibold mb-3 mt-6">系统设置</p>
        <ul space-y-1>
          <li>
            <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100">
              <i class="fa fa-user w-5 text-center"></i>
              <span>用户管理</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-3 py-2 rounded-md text-gray-600 hover:bg-gray-100">
              <i class="fa fa-cog w-5 text-center"></i>
              <span>系统设置</span>
            </a>
          </li>
        </ul>
      </nav>
    </aside>
    
    <!-- 主内容区 -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航栏 -->
      <header class="bg-white shadow-sm z-10">
        <div class="flex items-center justify-between p-4">
          <div class="flex items-center">
            <button id="sidebar-toggle" class="md:hidden mr-4 text-gray-600">
              <i class="fa fa-bars text-xl"></i>
            </button>
            <h2 class="text-lg font-semibold">文章管理</h2>
          </div>
          
          <div class="flex items-center space-x-4">
            <div class="relative">
              <input type="text" placeholder="全局搜索..." class="pl-9 pr-4 py-2 rounded-full text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 w-48 lg:w-64">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
            
            <div class="relative">
              <button class="flex items-center space-x-2 focus:outline-none">
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                <span class="hidden md:inline-block text-sm font-medium">管理员</span>
                <i class="fa fa-angle-down text-gray-500"></i>
              </button>
            </div>
          </div>
        </div>
      </header>
      
      <!-- 内容区域 -->
      <main class="flex-1 overflow-y-auto p-4 md:p-6 bg-gray-50">
        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
          <div class="bg-white rounded-lg shadow-sm p-5 card-hover">
            <div class="flex justify-between items-start">
              <div>
                <p class="text-gray-500 text-sm">总文章数</p>
                <h3 class="text-2xl font-bold mt-1">1,284</h3>
                <p class="text-green-500 text-xs mt-2 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 12% 较上月
                </p>
              </div>
              <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                <i class="fa fa-file-text-o"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-lg shadow-sm p-5 card-hover">
            <div class="flex justify-between items-start">
              <div>
                <p class="text-gray-500 text-sm">已发布</p>
                <h3 class="text-2xl font-bold mt-1">956</h3>
                <p class="text-green-500 text-xs mt-2 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 8% 较上月
                </p>
              </div>
              <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                <i class="fa fa-check-circle-o"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-lg shadow-sm p-5 card-hover">
            <div class="flex justify-between items-start">
              <div>
                <p class="text-gray-500 text-sm">草稿</p>
                <h3 class="text-2xl font-bold mt-1">328</h3>
                <p class="text-red-500 text-xs mt-2 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 5% 较上月
                </p>
              </div>
              <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
                <i class="fa fa-pencil"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-lg shadow-sm p-5 card-hover">
            <div class="flex justify-between items-start">
              <div>
                <p class="text-gray-500 text-sm">总阅读量</p>
                <h3 class="text-2xl font-bold mt-1">245.8K</h3>
                <p class="text-green-500 text-xs mt-2 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 15% 较上月
                </p>
              </div>
              <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                <i class="fa fa-eye"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 文章活跃度图表 -->
        <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h3 class="font-semibold">文章活跃度趋势</h3>
            <div class="flex space-x-2">
              <button class="text-sm px-3 py-1 rounded-md bg-primary/10 text-primary">周</button>
              <button class="text-sm px-3 py-1 rounded-md text-gray-500 hover:bg-gray-100">月</button>
              <button class="text-sm px-3 py-1 rounded-md text-gray-500 hover:bg-gray-100">年</button>
            </div>
          </div>
          <div class="h-64">
            <canvas id="activityChart"></canvas>
          </div>
        </div>
        
        <!-- 文章管理工具栏 -->
        <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
          <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4">
            <h3 class="font-semibold">文章列表</h3>
            <div class="flex flex-col sm:flex-row gap-3">
              <button class="btn-primary flex items-center justify-center">
                <i class="fa fa-plus mr-2"></i> 新建文章
              </button>
              <button class="btn-outline flex items-center justify-center">
                <i class="fa fa-download mr-2"></i> 导出数据
              </button>
            </div>
          </div>
          
          <!-- 搜索和筛选 -->
          <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
            <div class="relative">
              <input type="text" placeholder="搜索文章标题..." class="w-full pl-9 pr-4 py-2 rounded-md text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
            
            <select class="w-full px-4 py-2 rounded-md text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 bg-white">
              <option value="">所有分类</option>
              <option value="1">技术文章</option>
              <option value="2">产品动态</option>
              <option value="3">行业资讯</option>
              <option value="4">教程指南</option>
            </select>
            
            <select class="w-full px-4 py-2 rounded-md text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 bg-white">
              <option value="">所有状态</option>
              <option value="published">已发布</option>
              <option value="draft">草稿</option>
              <option value="pending">待审核</option>
              <option value="rejected">已驳回</option>
            </select>
            
            <div class="relative">
              <input type="text" placeholder="选择日期范围" class="w-full pl-4 pr-10 py-2 rounded-md text-sm border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
              <i class="fa fa-calendar absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
          </div>
          
          <!-- 文章列表表格 -->
          <div class="overflow-x-auto">
            <table class="w-full text-sm">
              <thead>
                <tr class="border-b">
                  <th class="text-left py-3 px-4 font-medium text-gray-500 w-10">
                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                  </th>
                  <th class="text-left py-3 px-4 font-medium text-gray-500">标题</th>
                  <th class="text-left py-3 px-4 font-medium text-gray-500 hidden md:table-cell">分类</th>
                  <th class="text-left py-3 px-4 font-medium text-gray-500 hidden md:table-cell">作者</th>
                  <th class="text-left py-3 px-4 font-medium text-gray-500 hidden sm:table-cell">状态</th>
                  <th class="text-left py-3 px-4 font-medium text-gray-500 hidden lg:table-cell">阅读量</th>
                  <th class="text-left py-3 px-4 font-medium text-gray-500 hidden md:table-cell">发布日期</th>
                  <th class="text-left py-3 px-4 font-medium text-gray-500">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr class="border-b hover:bg-gray-50">
                  <td class="py-3 px-4">
                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                  </td>
                  <td class="py-3 px-4">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/24/60/40" alt="文章缩略图" class="w-12 h-8 object-cover rounded mr-3">
                      <span class="font-medium">2023年前端开发趋势预测</span>
                    </div>
                  </td>
                  <td class="py-3 px-4 hidden md:table-cell">技术文章</td>
                  <td class="py-3 px-4 hidden md:table-cell">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/1001/30/30" alt="作者头像" class="w-6 h-6 rounded-full mr-2">
                      <span>张晓明</span>
                    </div>
                  </td>
                  <td class="py-3 px-4 hidden sm:table-cell">
                    <span class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">已发布</span>
                  </td>
                  <td class="py-3 px-4 hidden lg:table-cell">12,548</td>
                  <td class="py-3 px-4 hidden md:table-cell text-gray-500">2023-05-15</td>
                  <td class="py-3 px-4">
                    <div class="flex space-x-2">
                      <button class="text-blue-500 hover:text-blue-700" title="编辑">
                        <i class="fa fa-pencil"></i>
                      </button>
                      <button class="text-green-500 hover:text-green-700" title="查看">
                        <i class="fa fa-eye"></i>
                      </button>
                      <button class="text-red-500 hover:text-red-700" title="删除">
                        <i class="fa fa-trash"></i>
                      </button>
                    </div>
                  </td>
                </tr>
                
                <tr class="border-b hover:bg-gray-50">
                  <td class="py-3 px-4">
                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                  </td>
                  <td class="py-3 px-4">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/26/60/40" alt="文章缩略图" class="w-12 h-8 object-cover rounded mr-3">
                      <span class="font-medium">如何使用Tailwind CSS构建响应式界面</span>
                    </div>
                  </td>
                  <td class="py-3 px-4 hidden md:table-cell">教程指南</td>
                  <td class="py-3 px-4 hidden md:table-cell">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/1002/30/30" alt="作者头像" class="w-6 h-6 rounded-full mr-2">
                      <span>李思思</span>
                    </div>
                  </td>
                  <td class="py-3 px-4 hidden sm:table-cell">
                    <span class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">已发布</span>
                  </td>
                  <td class="py-3 px-4 hidden lg:table-cell">8,965</td>
                  <td class="py-3 px-4 hidden md:table-cell text-gray-500">2023-05-10</td>
                  <td class="py-3 px-4">
                    <div class="flex space-x-2">
                      <button class="text-blue-500 hover:text-blue-700" title="编辑">
                        <i class="fa fa-pencil"></i>
                      </button>
                      <button class="text-green-500 hover:text-green-700" title="查看">
                        <i class="fa fa-eye"></i>
                      </button>
                      <button class="text-red-500 hover:text-red-700" title="删除">
                        <i class="fa fa-trash"></i>
                      </button>
                    </div>
                  </td>
                </tr>
                
                <tr class="border-b hover:bg-gray-50">
                  <td class="py-3 px-4">
                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                  </td>
                  <td class="py-3 px-4">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/60/60/40" alt="文章缩略图" class="w-12 h-8 object-cover rounded mr-3">
                      <span class="font-medium">产品更新日志：v2.3.0版本发布</span>
                    </div>
                  </td>
                  <td class="py-3 px-4 hidden md:table-cell">产品动态</td>
                  <td class="py-3 px-4 hidden md:table-cell">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/1003/30/30" alt="作者头像" class="w-6 h-6 rounded-full mr-2">
                      <span>王建国</span>
                    </div>
                  </td>
                  <td class="py-3 px-4 hidden sm:table-cell">
                    <span class="px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800">草稿</span>
                  </td>
                  <td class="py-3 px-4 hidden lg:table-cell">0</td>
                  <td class="py-3 px-4 hidden md:table-cell text-gray-500">未发布</td>
                  <td class="py-3 px-4">
                    <div class="flex space-x-2">
                      <button class="text-blue-500 hover:text-blue-700" title="编辑">
                        <i class="fa fa-pencil"></i>
                      </button>
                      <button class="text-green-500 hover:text-green-700" title="查看">
                        <i class="fa fa-eye"></i>
                      </button>
                      <button class="text-red-500 hover:text-red-700" title="删除">
                        <i class="fa fa-trash"></i>
                      </button>
                    </div>
                  </td>
                </tr>
                
                <tr class="border-b hover:bg-gray-50">
                  <td class="py-3 px-4">
                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                  </td>
                  <td class="py-3 px-4">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/42/60/40" alt="文章缩略图" class="w-12 h-8 object-cover rounded mr-3">
                      <span class="font-medium">人工智能在内容创作中的应用</span>
                    </div>
                  </td>
                  <td class="py-3 px-4 hidden md:table-cell">行业资讯</td>
                  <td class="py-3 px-4 hidden md:table-cell">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/1004/30/30" alt="作者头像" class="w-6 h-6 rounded-full mr-2">
                      <span>刘婷婷</span>
                    </div>
                  </td>
                  <td class="py-3 px-4 hidden sm:table-cell">
                    <span class="px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800">待审核</span>
                  </td>
                  <td class="py-3 px-4 hidden lg:table-cell">0</td>
                  <td class="py-3 px-4 hidden md:table-cell text-gray-500">2023-05-08</td>
                  <td class="py-3 px-4">
                    <div class="flex space-x-2">
                      <button class="text-blue-500 hover:text-blue-700" title="编辑">
                        <i class="fa fa-pencil"></i>
                      </button>
                      <button class="text-green-500 hover:text-green-700" title="查看">
                        <i class="fa fa-eye"></i>
                      </button>
                      <button class="text-red-500 hover:text-red-700" title="删除">
                        <i class="fa fa-trash"></i>
                      </button>
                    </div>
                  </td>
                </tr>
                
                <tr class="hover:bg-gray-50">
                  <td class="py-3 px-4">
                    <input type="checkbox" class="rounded text-primary focus:ring-primary">
                  </td>
                  <td class="py-3 px-4">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/36/60/40" alt="文章缩略图" class="w-12 h-8 object-cover rounded mr-3">
                      <span class="font-medium">从零开始学习React Hooks</span>
                    </div>
                  </td>
                  <td class="py-3 px-4 hidden md:table-cell">技术文章</td>
                  <td class="py-3 px-4 hidden md:table-cell">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/1001/30/30" alt="作者头像" class="w-6 h-6 rounded-full mr-2">
                      <span>张晓明</span>
                    </div>
                  </td>
                  <td class="py-3 px-4 hidden sm:table-cell">
                    <span class="px-2 py-1 rounded-full text-xs bg-red-100 text-red-800">已驳回</span>
                  </td>
                  <td class="py-3 px-4 hidden lg:table-cell">0</td>
                  <td class="py-3 px-4 hidden md:table-cell text-gray-500">2023-05-05</td>
                  <td class="py-3 px-4">
                    <div class="flex space-x-2">
                      <button class="text-blue-500 hover:text-blue-700" title="编辑">
                        <i class="fa fa-pencil"></i>
                      </button>
                      <button class="text-green-500 hover:text-green-700" title="查看">
                        <i class="fa fa-eye"></i>
                      </button>
                      <button class="text-red-500 hover:text-red-700" title="删除">
                        <i class="fa fa-trash"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 分页 -->
          <div class="flex flex-col sm:flex-row justify-between items-center mt-6 gap-4">
            <div class="text-sm text-gray-500">
              显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">1284</span> 条
            </div>
            
            <div class="flex items-center space-x-1">
              <button class="w-9 h-9 flex items-center justify-center rounded-md border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-50" disabled>
                <i class="fa fa-angle-left"></i>
              </button>
              <button class="w-9 h-9 flex items-center justify-center rounded-md bg-primary text-white">1</button>
              <button class="w-9 h-9 flex items-center justify-center rounded-md border border-gray-200 hover:bg-gray-50">2</button>
              <button class="w-9 h-9 flex items-center justify-center rounded-md border border-gray-200 hover:bg-gray-50">3</button>
              <button class="w-9 h-9 flex items-center justify-center rounded-md border border-gray-200 hover:bg-gray-50">4</button>
              <button class="w-9 h-9 flex items-center justify-center rounded-md border border-gray-200 hover:bg-gray-50">5</button>
              <button class="w-9 h-9 flex items-center justify-center rounded-md border border-gray-200 text-gray-500 hover:bg-gray-50">
                <i class="fa fa-angle-right"></i>
              </button>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
  
  <script>
    // 初始化活跃度图表
    document.addEventListener('DOMContentLoaded', function() {
      const ctx = document.getElementById('activityChart').getContext('2d');
      
      const chart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [
            {
              label: '发布文章',
              data: [12, 19, 15, 22, 18, 25, 14],
              borderColor: '#2DD4BF',
              backgroundColor: 'rgba(45, 212, 191, 0.1)',
              tension: 0.4,
              fill: true
            },
            {
              label: '阅读量',
              data: [156, 205, 189, 245, 210, 175, 140],
              borderColor: '#3B82F6',
              backgroundColor: 'rgba(59, 130, 246, 0.1)',
              tension: 0.4,
              fill: true
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'top',
            }
          },
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
      
      // 侧边栏切换功能
      const sidebarToggle = document.getElementById('sidebar-toggle');
      const sidebar = document.querySelector('aside');
      
      sidebarToggle.addEventListener('click', function() {
        sidebar.classList.toggle('hidden');
        sidebar.classList.toggle('absolute');
        sidebar.classList.toggle('inset-y-0');
        sidebar.classList.toggle('left-0');
        sidebar.classList.toggle('w-64');
      });
    });
  </script>
</body>
</html>
